<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/OL_SDK/include-openlayers-local.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        .ol-zoomslider {
            top: 7.5em !important;
            background-color: #652e8088;
        }

        .ol-zoomslider:hover {
            background-color: #652e8099;
        }

        #mouse-position {
            position: fixed;
            width: 200px;
            height: 50px;
            background-color: #ff2d5166;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            text-align: center;
            line-height: 50px;
        }

        .ol-custom-overviewmap {
            /* position: fixed; */
            right: 0;
            bottom: 0;
            top: auto;
            left: auto;
        }

        .ol-overviewmap-box {
            border: 1px solid #ff2d51;

        }
    </style>
</head>

<body>
    <div id="mouse-position">

    </div>
    <div id="map">

    </div>
    <script>
        var gaode = new ol.layer.Tile({
            title: "高德地图-矢量图层",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            }),
            // visible: false
        });
        const map = new ol.Map({
            target: "map",
            layers: [gaode],
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 4,
                projection: "EPSG:4326"
            })
        })
        /* 导航控件 */
        const nav = new ol.control.ZoomToExtent({
            extent: [
                100, 30,
                140, 30
            ]
        })
        map.addControl(nav);
        /* 放大缩小控件 */
        var zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider);

        var mousePositionControl = new ol.control.MousePosition({
            //坐标格式
            coordinateFormat: ol.coordinate.createStringXY(4),
            //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
            projection: 'EPSG:4326',
            //坐标信息显示样式类名，默认是'ol-mouse-position'
            className: 'custom-mouse-position',
            //显示鼠标位置信息的目标容器
            target: document.getElementById('mouse-position'),
            //未定义坐标的标记
            undefinedHTML: '&nbsp;'
        });
        map.addControl(mousePositionControl);
        /* 比例尺 */
        var scaleLineControl = new ol.control.ScaleLine({
            //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
            units: "metric"
        });
        map.addControl(scaleLineControl)

        const overviewMapControl = new ol.control.OverviewMap({
            /* 鹰眼控件样式  */
            className: 'ol-overviewmap ol-custom-overviewmap',
            layers: [gaode],
            /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
            collapseLabel: '\u00BB',
            /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
            label: '\u00AB',
            /* 初始为展开显示方式 */
            collapsed: false,
            view: new ol.View({
                projection: 'EPSG:4326',
                minZoom: 8,
                maxZoom: 18
            })
        })
        map.addControl(overviewMapControl)
        /* 全屏控件 */
        const fullScreen = new ol.control.FullScreen();
        map.addControl(fullScreen)
    </script>
</body>

</html>